<template>
  <div class="externalContainerEdit">
    <div class="externalContainer">
      <split-vertical title="编辑外部诉单信息"></split-vertical>
      <div class="innerCon">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" >
          <el-row>
            <el-col :span="12">
              <el-form-item label="订单平台" prop="channelId" style="margin-top:20px;">
                <el-select v-model="editData.channelId" placeholder="请选择"  size="medium" filterable allow-create clearable>
                  <el-option
                    v-for="item in channelList"
                    :key="item.id"
                    :label="item.channelName"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订单公司" prop="companyId" style="margin-top:20px;">
                <el-select v-model="editData.companyId" placeholder="请选择"  size="medium" filterable allow-create clearable >
                  <el-option
                    v-for="item in companyList"
                    :key="item.id"
                    :label="item.companyName"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="客诉类型" required>
                <el-select v-model="editData.complainType" placeholder="请选择"  size="medium" filterable allow-create clearable>
                  <el-option
                    v-for="item in exchangeGoods"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客诉原因" prop="complainReason">
                <el-select v-model="editData.complainReason" placeholder="请选择"  size="medium" filterable allow-create clearable>
                  <el-option
                    v-for="item in complaintReason"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="解决方案" prop="complainSolution">
                <el-select v-model="editData.complainSolution" placeholder="请选择"  size="medium" filterable allow-create clearable>
                  <el-option
                    v-for="item in solveList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订单编号" prop="orderCode">
                <el-input v-model="editData.orderCode"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="情况说明" prop="complainSituation">
                <el-input v-model="editData.complainSituation"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="姓名" prop="customerName">
                <el-input v-model="editData.customerName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="联系方式" prop="customerContact">
                <el-input v-model="editData.customerContact" oninput="this.value=this.value.replace(/[^\d]/g,'')"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="产生费用" prop="isCost">
                <el-radio-group v-model="editData.isCost">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="客户地址" prop="customerAddress">
                <el-input v-model="editData.customerAddress"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row >
            <el-col :span="12">
              <el-form-item label="费用类型" prop="costType">
                <el-select v-model="editData.costType" placeholder="请选择">
                  <el-option
                    v-for="item in costType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="责任方" prop="responsibleParty">
                <el-select v-model="editData.responsibleParty" placeholder="请选择">
                  <el-option
                    v-for="item in ResponsibleParty"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row >
            <el-col :span="12">
              <el-form-item label="额外赔偿" prop="extraCharges">
                <el-input v-model="editData.extraCharges" oninput="this.value=this.value.replace(/[^\-?\d.]/g,'')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="物流费用" prop="postageAssume">
                <el-input v-model="editData.postageAssume" oninput="this.value=this.value.replace(/[^\-?\d.]/g,'')"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form-item label="退货单号" prop="returnExpressCode">
                  <el-input v-model="editData.returnExpressCode" oninput="this.value=this.value.replace(/[^\-?\d.]/g,'')"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注" prop="remark">
                <el-input   v-model="editData.remark"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')" size="medium">保存</el-button>
            <el-button @click="cancelExternal" size="medium">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
  import SplitVertical from "components/common/SplitVertical"
  import {localStorage} from "js/localStorage"
  export default {
    components:{
      SplitVertical
    },
    data() {
      return {
        ruleForm: {

        },
        rules: {
        },
        //客诉类型
        exchangeGoods:[
          {
            value:'0' ,
            label:"咨询",
          },{
            value:'1',
            label:'退货'
          },{
            value:'2',
            label:'换货'
          },{
            value:'3',
            label:'补发'
          }],
        //责任方
        ResponsibleParty:[
          {
            value:'1' ,
            label:"无",
          },{
            value:'2',
            label:'邮政'
          },{
            value:'3',
            label:'厂家'
          }],
        //费用类型
        costType:[
          {
            value :'0',
            label:"无"
          },
          {
            value:'1' ,
            label:"商品采购费",
          },{
            value:'2',
            label:'物流费'
          },
          {
            value:'3',
            label:'采购和物流费用'
          }],
        //客诉原因
        complaintReason:[
          {
            id:'1',
            value :'改地址',
            label:"改地址"
          },
          {
            id:'2',
            value:'改号码' ,
            label:"改号码",
          },
          {
            id:'3',
            value:'破损',
            label:'破损'
          },
          {
            id:'4',
            value:'缺货',
            label:'缺货'
          },
          {
            id:'5',
            value:'未发货',
            label:'未发货'
          },
          {
            id:'6',
            value:'质量',
            label:'质量'
          },
          {
            id:'7',
            value:'咨询',
            label:'咨询'
          },
          {
            id:'8',
            value:'限制发货',
            label:'限制发货'
          },
          {
            id:'9',
            value:'催货',
            label:'催货'
          },
           {
            id:'10',
            value:'丢件',
            label:'丢件'
          },
          {
            id:'11',
            value:'七天无理由退货',
            label:'七天无理由退货'
          }],
        //解决方案
        solveList:[
          {
            id:'1',
            value:'已处理',
            label:'已处理'
          },
          {
            id:'2',
            value:'线下补偿',
            label:'线下补偿'
          },
          {
            id:'3',
            value:'补发',
            label:'补发'
          },
          {
            id:'4',
            value:'退积分',
            label:'退积分'
          },
        ],
        companyList:[],
        channelList:[],
        userId:'',
        id:'',
        editData:{}
      };
    },
    created(){
      this.id=this.$route.query.id
      this.userId=localStorage.get("userID")
      this.init()
    },
    methods: {
      init(){
        this.getEditData()
        this.getChannel()
        this.getCompany()
      },
      getEditData(){
        let param={
          id:this.id
        }
        let succ=data=>{
          if (data.code == 'OK') {
            this.editData=data.data
          } else {
            this.$message.error(data.msg)
          }
        }
        this.api.externalComplainGetOne(param,succ)
      },
      getChannel(){
        let succ=data=>{
          if(data.code=="OK"){
            this.channelList=data.data
          }else{
            this.$message.error(data.msg)
          }
        }
        this.api.channelAll({},succ)
      },
      cancelExternal(){
        this.$router.go(-1)
      },
      externalUpdate(){
        let parmas={
          complainId:this.editData.id,
          channelId:this.editData.channelId,
          companyId:this.editData.companyId,
          complainReason:this.editData.complainReason,
          complainSituation:this.editData.complainSituation,
          customerContact:this.editData.customerContact,
          customerName:this.editData.customerName,
          complainSolution:this.editData.complainSolution,
          customerAddress:this.editData.customerAddress,
          complainType:this.editData.complainType,
          remark:this.editData.remark,
          responsibleParty:this.editData.responsibleParty,
          isCost:this.editData.isCost,
          costType:this.editData.costType,
          postageAssume:this.editData.postageAssume,
          extraCharges:this.editData.extraCharges,
          returnExpressCode:this.editData.returnExpressCode,
          orderCode:this.editData.orderCode,
          isSolve:this.editData.isSolve,
          userId:this.userId
        }
        let success=data=>{
          if(data.code=="OK"){
            this.$message.success(data.msg)
            this.$router.go(-1)
          }else{
            this.$message.error(data.msg)
          }
        }
        this.api.externalComplainUpdate(parmas,success)
      },
      getCompany(){
        let succ=data=>{
          if(data.code=="OK"){
            this.companyList=data.data
          }else{
            this.$message.error(data.msg)
          }
        }
        this.api.companyAll({},succ)
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.externalUpdate()
          } else {
            return false;
          }
        });
      }
    }
  }
</script>
<style lang="scss" scoped>
  .externalContainerEdit{
    .externalContainer{
      background-color: #fff;
      height:670px;
      padding:0 10px;
      border-left: 2px solid #e8e8e8;
      border-right: 2px solid #e8e8e8;
      border-bottom: 2px solid #e8e8e8;
      .innerCon{
        width:70%;
      }
      .el-input{
        width:70%;
      }

      .el-select{
        width:70%;
      }

    }
    .btn{
      width:100%;
      text-align: center;
    }

  }
</style>
